<template>
  <div>
    <div class="layout-content control-content">
      <!-- 查询表单 -->
      <Form ref="formInline" :model="searchfrom" inline class="from-content">
        <FormItem>
          <Input type="text" v-model="searchfrom.Name" placeholder="请输入项目名称" />
        </FormItem>
       <FormItem label="项目类型" :label-width="60"  >
          <Select v-model="searchfrom.Xmlb"  >
              <Option value="0" key="0">全部</Option>
              <Option v-for="item in XMLB_LIST" :value="item.Id" :key="item.Id">{{item.Name}}</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="search()">查询</Button>
        </FormItem>
      </Form>

    </div>
    <div class="layout-content main-content">
      <Button type="primary" @click="add('添加项目')">添加</Button>
      <Table ref="table" border :columns="fields" :data="tabledata" :height="tableHeight">
        <!-- table 操作 -->
        <template slot-scope="{ row,index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="add('编辑项目',row.id,index)">编辑</Button>
            <Button type="error" size="small" @click="remove(row.Id,index)">删除</Button>
        </template>
      </Table>
      <!-- 分页区域 -->
      <div class="page-cut">
        <Page :total="count" size="small" show-elevator :current="page" @on-change="pageData" />
      </div>
    </div>
      <!-- 弹层 -->
      <Modal
          v-model="modal_visable"
          :title="modal_title"
          :loading="modalLoading"
          :mask-closable="false">
          <!-- 弹层内容 -->
          <Form ref="modal_form" :model="modal_form" :rules="modal_form_rules">
            <input type="hidden" v-model="modal_form.Id">
            <FormItem prop="Name">
                <Input type="text" v-model="modal_form.Name" placeholder="请填写项目名称" />
            </FormItem>
            <FormItem prop="Category_id">
              <Select v-model="modal_form.Category_id" placeholder="请选择治疗项目" >
                <Option v-for="item in XMLB_LIST" :value="item.Id" :key="item.Id">{{item.Name}}</Option>
              </Select>
            </FormItem>
            <FormItem prop="Treat_id">
              <Select v-model="modal_form.Treat_id" placeholder="请选择治疗师项目">
                <Option v-for="item in ZLSLB_LIST" :value="item.Id" :key="item.Id">{{item.Name}}</Option>
              </Select>
            </FormItem>
            <FormItem prop="Time">
                <Input type="text" v-model="modal_form.Time" placeholder="请选择治疗时长" />
            </FormItem>
            <FormItem prop="Price">
                <Input type="text" v-model="modal_form.Price" placeholder="请选择治疗金额" />
            </FormItem>
            是否支持多人：
            <RadioGroup v-model="modal_form.More" type="button">
                <Radio label="是"></Radio>
                <Radio label="否"></Radio>
           </RadioGroup>
          </Form>
          <div slot="footer">
              <Button @click="modal_cancel">取消</Button>
              <Button type="primary" @click="modal_ok">确定</Button>
          </div>
          <!-- 弹层内容 end -->
      </Modal>
  </div>
</template>

<script>
import mixin from '../Mixin/mix'
import { constants } from 'crypto';
export default {
  data() {
    return {
      // 弹层显示状态
      modal_visable:false,
      modal_title:'弹层标题',
      modalLoading:false,
      page:1,
      count:0,
      // 查询表单
      searchfrom: {
        Name: "",
        Xmlb: "0"
      },
      // 表格字段
      fields: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: "项目名称",
          key: "Name"
        },
        {
          title: "项目类型",
          key: "cName"
        },
        {
          title: "治疗师类型",
          key: "tName"
        },
        {
          title: "治疗时长",
          key: "Time"
        },
        {
          title: "是否支持多人",
          key: "More"
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      // 表格数据
      tabledata: [],
      //检索列表
      XMLB_LIST: [],
      ZLSLB_LIST: [],
      // 弹层表单
      modal_form:{
        Id:'',
        Name:'',
        Category_id:'',
        Treat_id:'',
        Time:'',
        Price:'',
        More:'否',
      },
      // 弹层表单校验规则
      modal_form_rules:{
        // Name: [
        //   { required: true, message: '请添加项目名称', trigger: 'blur' }
        // ],
        // Category_id: [
        //   { required: true, message: '请选择项目类别', trigger: 'blur' }
        // ],
        // Treat_id: [
        //   { required: true, message: '请选择治疗师类别', trigger: 'blur' }
        // ],
        // Time: [
        //   { required: true, message: '请添加治疗时间', trigger: 'blur' }
        // ],
        // Price: [
        //   { required: true, message: '请添加治疗金额', trigger: 'blur' }
        // ],
      }
    };
  },
  mixins:[mixin],
  beforeMount() {
    this.loadData();
  },
  methods: {
    //分页数据
    pageData(page){
      this.page = page
      this.loadData();
    },
    // 获取数据
    loadData() {
      var param = {
        page:this.page,
        Name:this.searchfrom.Name,
        Xmlb:this.searchfrom.Xmlb
      };
      this.ajax("api/Project/XmList/",'post',param,true).then(res=>{
        console.log(res);
        this.tabledata = res.data.data.list
        this.XMLB_LIST = res.data.data.XMLB_LIST
        this.ZLSLB_LIST = res.data.data.ZLSLB_LIST
        this.count = res.data.data.count
      })
    },
    // 搜索
    search() {
      console.log(this.searchfrom);
      this.loadData();
    },
    // action 点击添加
    add(title,id='0',index='-1'){
      this.modal_visable = true;
      this.modal_title = title;
      if(index >= 0){
        this.modal_form = {
          Id:this.tabledata[index].Id,
          Name:this.tabledata[index].Name,
          Category_id:this.tabledata[index].Category_id,
          Treat_id:this.tabledata[index].Treat_id,
          Time:this.tabledata[index].Time,
          Price:this.tabledata[index].Price,
          More:this.tabledata[index].More,
        };
        console.log(this.modal_form);
      }else{
        this.modal_form = {
          Id:'0',
          Name:'',
          Category_id:'',
          Treat_id:'',
          Time:'',
          Price:'',
          More:'否',
        };
      }
    },    
    // action 点击删除
    remove(id,index){
      this.$Modal.confirm({
          title: '操作提示',
          content: '<p>您确认要删除吗？</p>',
          loading: true,
          onOk: () => {
               this.ajax('api/Project/Xmdel/',"post",{Id:id},true).then(res => {
                  setTimeout(() => {
                    this.$Modal.remove();
                    if(res.data.code == 200){
                      this.tabledata.splice(index, 1);
                    }
                    this.$Notice.success({
                        title: '操作提示',
                        desc:res.data.msg
                    });
                  }, 500);
              });
          },
          onCancel: () => {
              this.$Message.info('取消操作');
          }
      });
    },
    // 弹层点击确定回调
    modal_ok () {
      this.$refs["modal_form"].validate((valid) => {
          if (valid) {
              var param = this.modal_form;
              if(!param['Name']){
                this.$Message.error('请填写项目名称!');
                return false;
              }
              if(!param['Category_id']){
                this.$Message.error('请选择治疗项目类别!');
                return false;
              }
              if(!param['Treat_id']){
                this.$Message.error('请选择治疗师分类!');
                return false;
              }
              if(!param['Time']){
                this.$Message.error('请填写治疗时长!');
                return false;
              }
              if(!param['Price']){
                this.$Message.error('请填写治疗金额!');
                return false;
              }
              this.ajax('api/Project/XmInfo/',"post", param,true).then(res => {
                this.$Notice.success({
                    title: '操作提示',
                    desc:res.data.msg
                });
                if(res.data.code == 200){
                  this.loadData();
                }
                this.modal_visable=false;
              });
          } else {
              this.$Message.error('请填写必填项');
          }
      })
    },
    // 弹层点击确定回调
    modal_cancel () {
        // 弹层取消点击回调
        this.$Message.info('取消操作');
        this.modal_visable=false;
    },
  }
};
</script>

<style scoped>
@import "../../style/base.css";
</style>
